<script lang="ts">
  import Extra from "./Extra.svelte";

  export let title: string = "";
  export let extra: boolean = false;
</script>

<div
  class="relative h-7 leading-7 2xl:h-[2rem] 2xl:leading-[2rem] 3xl:h-[3rem] 3xl:leading-[3rem] 4xl:h-[4rem] 4xl:leading-[4rem] text-sm 2xl:text-lg 3xl:text-2xl 4xl:text-3xl relative header-bg align-middle"
>
  <div
    class="text-white pl-4 xl:pl-6 2xl:pl-[2rem] 3xl:pl-[3.2rem] 4xl:pl-[5rem] 5xl:pl-[5rem] font-bold"
  >
    {title}
  </div>
  {#if extra}
    <div class="absolute top-0 bottom-0 right-0">
      <div
        class="flex h-full text-white gap-2 text-xs 2xl:text-base 3xl:text-xl 4xl:text-2xl"
      >
        <div class="flex gap-1 items-center">
          <div class="h-1/3 aspect-square rounded-full bg-color-05ff00" />
          <div class="truncate">正常运行</div>
        </div>
        <div class="flex gap-1 items-center">
          <div class="h-1/3 aspect-square rounded-full bg-color-f00" />
          <div class="truncate">设备故障</div>
        </div>
        <div class="flex gap-1 items-center">
          <div class="h-1/3 aspect-square rounded-full bg-color-808080" />
          <div class="truncate">设备离线</div>
        </div>
      </div>
    </div>
  {/if}
</div>

<style>
  .header-bg {
    background-image: url("./title.png");
    @apply bg-no-repeat bg-contain bg-left;
  }
  .bg-color-05ff00 {
    background-color: #448bff;
  }
  .bg-color-f00 {
    background-color: #aa59e7;
  }
  .bg-color-808080 {
    background-color: #ed687b;
  }
</style>
